﻿<template>
  <div class="training-tracking">
    <div class="page-header neon-border">
      <h1 class="page-title gradient-text">📊 训练跟踪</h1>
      <p class="page-desc">实时监控联邦学习训练进度与性能指标</p>
    </div>

    <div class="tracking-content">
      <div class="metrics-grid">
        <div class="metric-card glass-card" v-for="metric in metrics" :key="metric.name">
          <div class="metric-icon">{{ metric.icon }}</div>
          <div class="metric-info">
            <div class="metric-value">{{ metric.value }}</div>
            <div class="metric-name">{{ metric.name }}</div>
          </div>
          <div class="metric-trend" :class="metric.trend">
            {{ metric.trend === 'up' ? '↗' : metric.trend === 'down' ? '↘' : '→' }}
          </div>
        </div>
      </div>

      <div class="charts-grid">
        <div class="chart-container glass-card">
          <h3>📈 损失函数曲线</h3>
          <div class="chart-placeholder">
            <p>损失函数图表将显示在这里</p>
            <div class="mock-chart">
              <div class="mock-line"></div>
            </div>
          </div>
        </div>
        
        <div class="chart-container glass-card">
          <h3>🎯 准确率趋势</h3>
          <div class="chart-placeholder">
            <p>准确率图表将显示在这里</p>
            <div class="mock-chart">
              <div class="mock-line accuracy"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const metrics = ref([
  { icon: '⚡', name: '训练速度', value: '128 samples/s', trend: 'up' },
  { icon: '🎯', name: '全局准确率', value: '87.3%', trend: 'up' },
  { icon: '📉', name: '平均损失', value: '0.234', trend: 'down' },
  { icon: '🔄', name: '通信轮次', value: '45', trend: 'up' }
])
</script>

<style scoped>
.tracking-content {
  padding: 20px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.metric-card {
  display: flex;
  align-items: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00f2fe, #9d50bb);
}

.metric-icon {
  font-size: 2em;
  margin-right: 15px;
}

.metric-info {
  flex: 1;
}

.metric-value {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 5px;
}

.metric-name {
  opacity: 0.8;
  font-size: 0.9em;
}

.metric-trend {
  font-size: 1.2em;
}

.metric-trend.up {
  color: #00ff88;
}

.metric-trend.down {
  color: #ff6b6b;
}

.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-container {
  padding: 20px;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
}

.mock-chart {
  width: 100%;
  height: 200px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}

.mock-line {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(to top, rgba(0, 242, 254, 0.3), transparent);
  clip-path: polygon(0% 100%, 10% 80%, 20% 85%, 30% 70%, 40% 75%, 50% 60%, 60% 65%, 70% 50%, 80% 55%, 90% 40%, 100% 45%, 100% 100%);
}

.mock-line.accuracy {
  background: linear-gradient(to top, rgba(0, 255, 136, 0.3), transparent);
  clip-path: polygon(0% 100%, 10% 65%, 20% 70%, 30% 55%, 40% 60%, 50% 45%, 60% 50%, 70% 35%, 80% 40%, 90% 25%, 100% 30%, 100% 100%);
}
</style>